<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>密度分析</title>
    <script type="text/javascript" include="jquery,bootstrap,loader" src="../js/include-web.js"></script>
    <style>
        .control {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        #map {
            position: absolute;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<div id="control" class="control" style='width:300px'>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">密度分析</h3>
        </div>
        <div class="panel-body">
            <div class="input-group">
                <span class="input-group-addon">输入数据<span title='必填字段' style='color: red;'> * </span>　</span>
                <input id="datasetName" type="text" class="form-control"
                       value="samples_newyork_taxi_2013-01_14k"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">分析方法<span title='必填字段' style='color: red;'> * </span>　</span>
                <div>
                    <select class="form-control" id="method" name="clientType">
                        <option value="0" selected="selected">简单点密度分析</option>
                        <option value="1">核密度分析</option>
                    </select>
                </div>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">网格面类型<span title='必填字段' style='color: red;'> * </span></span>
                <select class="form-control" id="meshType" name="clientType">
                    <option value="0" selected="selected">四边形网格</option>
                    <option value="1">六边形网格</option>
                </select>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">权重值字段　</span>
                <input id="fields" type="text" class="form-control" value="col7,col8"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">分析范围　　</span>
                <input id="query" type="text" class="form-control" value="-74.150, 40.550, -73.750, 40.950"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">网格大小<span title='必填字段' style='color: red;'> * </span>　</span>
                <input id="resolution" type="text" class="form-control" value="80"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">网格大小单位</span>
                <select class="form-control" id="meshSizeUnit" name="clientType">
                    <option value="Meter" selected="selected">Meter</option>
                    <option value="Kilometer">Kilometer</option>
                    <option value="Yard">Yard</option>
                    <option value="Foot">Foot</option>
                    <option value="Mile">Mile</option>
                </select>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">搜索半径<span title='必填字段' style='color: red;'> * </span>　</span>
                <input id="radius" type="text" class="form-control" value="300"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">搜索半径单位</span>
                <select class="form-control" id="radiusUnit" name="clientType">
                    <option value="Meter" selected="selected">Meter</option>
                    <option value="Kilometer">Kilometer</option>
                    <option value="Yard">Yard</option>
                    <option value="Foot">Foot</option>
                    <option value="Mile">Mile</option>
                </select>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">面积单位　　</span>
                <select class="form-control" id="areaUnit" name="clientType">
                    <option value="SquareMile" selected="selected">SquareMile</option>
                    <option value="Hectare">Hectare</option>
                    <option value="Are">Are</option>
                    <option value="Acre">Acre</option>
                    <option value="SquareFoot">SquareFoot</option>
                    <option value="SquareYard">SquareYard</option>
                    <option value="SquareMeter">SquareMeter</option>
                </select>
            </div>
            <p>
            <div align="right">
                <input type="button" id='btn' class="btn btn-primary" value="创建"/>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../../dist/include-classic.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://117.122.248.69:8090";
    var resultLayer,
        processingsUrl = host + "/iserver/services/distributedanalyst/rest/v1/jobs",
        mapURL = host + "/iserver/services/map-world/rest/maps/World",
        token = 'yurnlSeWak-vh77nAh73yrW_cHDTDJrfZxCVl7-h3GhMSMSNTPjvH7ykQviXfH1tOQ2ckJtUt6J9RY32GFNa6Q..',
        map = new SuperMap.Map("map", {
            controls: [
                new SuperMap.Control.Navigation(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.LayerSwitcher()

            ], allOverlays: true
        });
    map.addControl(new SuperMap.Control.MousePosition());
    var layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", mapURL, null, {maxResolution: "auto"});
    layer.events.on({"layerInitialized": addLayer});

    function addLayer() {
        map.addLayers([layer]);
        map.setCenter(new SuperMap.LonLat(-73.95, 40.75), 12);
    }

    var processingService = new SuperMap.REST.ProcessingService(processingsUrl);
    if (!window.isLocal) {
        SuperMap.SecurityManager.registerToken('http://117.122.248.69:8090/iserver', token);
    }

    function getQuery() {
        if ($('#query').val() === "") {
            return "";
        }
        var query = [];
        $('#query').val().split(',').map(function (el) {
            query.push(parseFloat(el));
        });
        return new SuperMap.Bounds(
            query[0],
            query[1],
            query[2],
            query[3]
        );
    }

    $('#btn').on('click', function () {
        if ($('#msg_container')[0]) {
            $('#msg_container').remove();
        }
        showLoader();
        if (map && resultLayer) {
            map.removeLayer(resultLayer);
        }
        var kernelDensityJobParameter = new SuperMap.KernelDensityJobParameter({
            datasetName: $('#datasetName').val(),
            resolution: $('#resolution').val(),
            method: $('#method option:selected').attr('value'),
            meshType: $('#meshType option:selected').attr('value'),
            fields: $('#fields').val(),
            query: getQuery(),
            radius: $('#radius').val(),
            meshSizeUnit: $('#meshSizeUnit option:selected').attr('value'),
            radiusUnit: $('#radiusUnit option:selected').attr('value'),
            areaUnit: $('#areaUnit option:selected').attr('value'),
        });
        processingService.addKernelDensityJob(kernelDensityJobParameter, function (serviceResult) {
            if (serviceResult.error) {
                removeLoader();
                var errorMsg = serviceResult.error.errorMsg || "code: " + serviceResult.error.code;
                showAlert("创建失败!<br>" + errorMsg, false);
                return;
            }
            serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
                if (info.serviceType === 'RESTMAP') {
                    SuperMap.FetchRequest.get(info.serviceAddress + '/maps').then(function (response) {
                        return response.json();
                    }).then(function (result) {
                        var mapUrl = result[0].path;
                        resultLayer = new SuperMap.Layer.TiledDynamicRESTLayer("resultLayer", mapUrl, {transparent: true});
                        resultLayer.events.on({"layerInitialized": addLayer});

                        function addLayer() {
                            map.addLayer(resultLayer);
                            removeLoader();
                        }
                    });
                }
            });
        });
    });

    function showAlert(msg, state) {
        var className = "alert-";
        className += state ? "success" : "danger";
        if (!$('#msg_container')[0]) {
            var alertDiv = $("<div class='alert alert-dismissible' id='msg_container' role='alert' " +
                "style='z-index:800;position: absolute;top: 20px;left: 40%;width:400px;display: none'>" +
                "<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
                "<strong><p id='msg' style='word-wrap: break-word'></p></strong></div>");
            $('body').append(alertDiv)
        }
        $('#msg_container').addClass(className);
        $('#msg_container').slideDown(300);
        $('#msg').html(msg);
    }

</script>
</body>
</html>